import react, { useEffect, useState } from 'react'
import { Navigate, useRoutes } from 'react-router-dom';
// react 动态加载组件 @loadable/component
import loadable from '@loadable/component'
import { useSelector, useDispatch } from 'react-redux'
import Home from '../pages/index'
import Login from '../pages/login'




// const menuRoutes = [
//     {
//         id: '11',
//         path: 'cggl',
//         element: <div>采购管理</div>
//     },
//     {
//         id: '12',
//         path: 'cgsq',
//         element: <div>采购申请</div>
//     }
// ]


export default function PrivateRoutes() {
    const state = useSelector(state => state)
    const dispatch = useDispatch()
    const chilRoutes = state.menuNav.routes ? state.menuNav.routes : []
    const currentKey = state.menuNav.currentSideKey ? state.menuNav.currentSideKey : ''
    const pageRoutes = state.chilRoutes.childrenRoutes ? state.chilRoutes.childrenRoutes : []
    const [routesArr, setRoutesArr] = useState([])


    useEffect(() => {
        // console.log("in");
        function bindRouter(list) {
            let arr = []
            list.map(item => {
                // console.log(item);
                const ComponentNode = loadable(() => {
                    return import('../components/' + item.elementPath)
                })
                if (item.children && item.children.length > 0) {
                    arr.push({
                        path: item.path,
                        element: <ComponentNode />,
                        children: [...bindRouter(item.children)]
                    })
                } else {
                    arr.push({
                        path: item.path,
                        element: <ComponentNode />
                    })
                }
            })
            return arr
        }



        function children(params) {
            if (Array.isArray(params)) {
                return params.map(item => {
                    let obj = {}
                    if ((item.id + '') === currentKey) {
                        const ComponentNode = loadable(() => {
                            return import('../pages/' + item.pagePath)
                        })
                        let temp = bindRouter(pageRoutes)
                        // obj = {
                        //     path: item.path,
                        //     element: <ComponentNode />,
                        //     children: [...temp]
                        // }
                        obj = {
                            path: item.path,
                            element: <ComponentNode />,
                            children: [{
                                path: 'permSettings',
                                element: <div>permSettings</div>
                            }]
                        }
                    } else {
                        const ComponentNode = loadable(() => {
                            return import('../pages/' + item.pagePath)
                        })
                        obj = {
                            path: item.path,
                            element: <ComponentNode />
                        }
                    }

                    return obj
                })
            }
        }

        setRoutesArr([...children(chilRoutes), {
            path: '*',
            element: <Navigate to={'/home'} />
        }])
    }, [currentKey])



    // console.log(routesArr);
    return (useRoutes([
        {
            path: '/',
            element: <Navigate to={'/login'} />
        }, {
            path: '/login',
            element: <Login />
        }, {
            path: '/home',
            element: <Home />,
            children: [...routesArr]

        }]))
}

